<template>
  <view class="settings-container">
    <!-- 用户信息设置 -->
    <view class="settings-group">
      <view class="settings-item" @tap="navigateToProfile">
        <text class="item-label">个人资料</text>
        <view class="item-right">
          <text class="item-value">修改</text>
          <text class="arrow">></text>
        </view>
      </view>
<!--      <view class="settings-item" @tap="navigateToAccount">-->
<!--        <text class="item-label">账号与安全</text>-->
<!--        <view class="item-right">-->
<!--          <text class="arrow">></text>-->
<!--        </view>-->
<!--      </view>-->
    </view>

    <!-- 通知设置 -->
    <view class="settings-group">
      <view class="settings-item">
        <text class="item-label">消息通知</text>
        <switch :checked="notifications" @change="toggleNotifications" color="#4080FF" />
      </view>
      <view class="settings-item">
        <text class="item-label">声音</text>
        <switch :checked="sound" @change="toggleSound" color="#4080FF" />
      </view>
    </view>

    <!-- 其他设置 -->
    <view class="settings-group">
      <view class="settings-item" @tap="clearCache">
        <text class="item-label">清除缓存</text>
        <view class="item-right">
          <text class="item-value">{{ cacheSize }}</text>
          <text class="arrow">></text>
        </view>
      </view>
      <view class="settings-item" @tap="checkUpdate">
        <text class="item-label">检查更新</text>
        <view class="item-right">
          <text class="item-value">当前版本 1.0.0</text>
          <text class="arrow">></text>
        </view>
      </view>
      <view class="settings-item" @tap="showAbout">
        <text class="item-label">关于我们</text>
        <view class="item-right">
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!--      待后续完成-->
    <!-- 在设置列表中添加AI客服设置选项  -->
<!--    <view class="menu-section">-->
<!--      <view class="section-title">AI设置</view>-->
<!--      <view class="menu-item" @tap="goToAISettings">-->
<!--        <text class="menu-label">AI客服设置</text>-->
<!--        <text class="menu-arrow">></text>-->
<!--      </view>-->
<!--    </view>-->

    <!-- 退出登录 -->
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notifications: true,
      sound: true,
      cacheSize: '2.5MB'
    }
  },
  methods: {
    navigateToProfile() {
      uni.navigateTo({
        url: '/pages/profile/index'
      })
    },
    navigateToAccount() {
      uni.navigateTo({
        url: '/pages/account/index'
      })
    },
    toggleNotifications(e) {
      this.notifications = e.detail.value
    },
    toggleSound(e) {
      this.sound = e.detail.value
    },
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '清除成功',
              icon: 'success'
            })
            this.cacheSize = '0B'
          }
        }
      })
    },
    checkUpdate() {
      uni.showToast({
        title: '已是最新版本',
        icon: 'none'
      })
    },
    showAbout() {
      uni.navigateTo({
        url: '/pages/about/index'
      })
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            const app = getApp()
            app.clearLoginState()
            
            // 显示退出成功提示
            uni.showToast({
              title: '已退出登录',
              icon: 'success',
              duration: 2000
            })
            
            // 延迟跳转到登录页
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }, 1500)
          }
        }
      })
    },
    // 跳转到AI客服设置
    goToAISettings() {
      uni.navigateTo({
        url: '/pages/chat/index?showSettings=true'
      })
    }
  }
}
</script>

<style>
.settings-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx 0;
}

.settings-group {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.settings-item:last-child {
  border-bottom: none;
}

.item-label {
  font-size: 28rpx;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
}

.item-value {
  font-size: 26rpx;
  color: #999;
  margin-right: 10rpx;
}

.arrow {
  font-size: 28rpx;
  color: #999;
}

.logout-btn {
  width: 90%;
  height: 88rpx;
  line-height: 88rpx;
  margin: 40rpx auto;
  background: #fff;
  color: #ff4d4f;
  font-size: 32rpx;
  border-radius: 44rpx;
  text-align: center;
  border: none;
}

.logout-btn:active {
  opacity: 0.8;
}

.menu-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-label {
  font-size: 28rpx;
  color: #333;
}

.menu-arrow {
  font-size: 28rpx;
  color: #999;
}
</style> 